<template>
  <page-wrap :header-props="headerProps">
    <div class="details-container" v-if="isShowpage">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="loadData"
        :immediate-check="false"
        offset="100"
      >
      <div v-if="tableData[0]">
      <div class="header-h2">
        <h2>桌号：{{ params.roomName }}</h2>
        <div class="h2-table" style="color: #999999">
            <span>人数：<span style="color: #fff;" >{{tableData[0].arrivedPeoperCount}}</span> 人
            <span style="color: #999999">；共  <span style="color: #fff;">{{ tableData[0].mainCount }}</span>  项</span>
            <span style="color: #999999">、<span style="color: #fff;">{{ tableData[0].mainGoodsCount }}</span> 份；</span>
           </span>
        </div>
      </div>
      <div class="jt-header-box">
            <div class="jt-header-pd">
                  <div class="jt-td-flex">
                         <div class="jt-td-code">台单号：{{ params.consumeCode }}</div>
                         <div class="jt-td-price">商品金额：<span v-if="brandCode != '0003'" style="color: #ccc;">{{ formatNumber(tableData[0].goodsTotalAmt) }} </span> </div>
                  </div>
                  <div class="jt-center-flex">
                       <div class="jt-skflex-box">
                            <div class="jt-item">
                                 <div class="jt-label">收款金额：</div>
                                 <div class="jt-value" v-if="brandCode != '0003'">￥{{ formatNumber(tableData[0].payAmt) }}</div>
                            </div>
                            <div class="jt-item">
                                 <div class="jt-label">未支付：</div>
                                 <div class="jt-value" v-if="brandCode != '0003'" style="color: #FF3333;">￥{{ formatNumber(tableData[0].unPayAmt) }}</div>
                            </div>
                       </div>
                       <div class="jt-skflex-box jt-skflex-mt">
                            <div class="jt-item"> 
                                    <div class="jt-label">优惠总金额：</div>
                                    <div class="jt-value" v-if="brandCode != '0003'">￥{{ formatNumber(tableData[0].disAmt) }}</div>
                                </div>
                              <div class="jt-item">
                                  <div class="jt-label">其他金额：</div>
                                  <div class="jt-value" v-if="brandCode != '0003'">￥{{ formatNumber(tableData[0].otherAmt) }}</div>
                              </div>
                       </div>
                  </div>
                  <div class="jt-mask">开台备注：
                    <span style="color: #CCCCCC;" v-if="tableData[0].remark">{{ tableData[0].remark }}</span>
                    <span style="color: #CCCCCC;" v-else>无</span>
                  </div>
            </div>
      </div>
    </div>
        <div v-for="(item, index) in tableData" :key="index">
     
          <div class="details-container-main">
            <div class="container-main-header"> 
              <div class="main-header-title">已结账商品</div>
            </div>
            <div
              class="container-main-height"
              :class="{ isShow: showAllGoodsInfo }"
            >
              <div
                class="container-main-content"
                v-for="(v, k) in item.payGoods.slice(0, itemNumber)"
                :key="k"
                style="margin-bottom: 0;"
              >
                <div class="main-content-title spe">
                  <div class="title-oderNum">结账单号：{{ v.payBatchCode }} <div>下单人：{{v.orderUser}}</div></div>
                  <div class="icon-list" v-for="(payItem, payIndex) in v.payRecordList">
                    <!-- 会员优惠券  -->
                    <div class="title-icon" v-if="payItem.payType == '012'" :style="{ backgroundImage: `url(${icon_dui})` }"></div> 
                    <!-- 赠送   -->
                    <div class="title-icon" v-if="payItem.payType == '011'" :style="{ backgroundImage: `url(${icon_zeng})` }"></div>
                     <!-- 团购券  -->
                    <div class="title-icon" v-if="payItem.payType == '010'" :style="{ backgroundImage: `url(${icon_tuan})` }"></div>
                  </div>
                  <div class="content-all-btn" v-if="v.prodMethod == '未出品'" @click="changeGoodsType(v)">出品</div>
                  <div class="content-all-tip" v-else>已出品</div> 
                </div>
                <div class="main-content-time">
                    <div class="time-line"></div>
                    <div class="time-title">下单时间：{{v.orderTime ? dayjs(v.orderTime).format('YYYY-MM-DD HH:mm:ss') : '--'}}</div>
                    <div class="time-line"></div>
                </div>
                <div class="main-content-item"
                  v-for="(vi, ki) in v.payGoodsdtl"
                  :key="ki"
                >
                  <div v-if="!vi.goodsPriceInfos">
                    <div class="content-item-name">
                      {{ vi.goodsName }}
                    </div>
                    <div class="content-item-value">
                      <div class="item-value-specifications">
                        规格：{{ vi.standard }}
                      </div>
                      <div class="item-value-num">×{{ vi.realQty }}</div>
                      <div class="item-value-price">
                        ￥{{ formatNumber(vi.realAmt) }}
                      </div>
                    </div>
                  </div>
                </div>        
                <div>
                  <van-collapse
                    v-model="activeNames"
                    class="main-content-package"
                    :accordion="false"
                    :is-link="false"
                    v-for="(packageItem, packageIndex) in v.payGoodsdtl"
                    :key="packageIndex"
                  >
                    <van-collapse-item
                      :name="packageItem.goodsCode + packageIndex"
                      @click="toggleActive('已结账',index, k, packageIndex)"
                      v-if="packageItem.goodsPriceInfos"
                    >
                      <template v-slot:title>
                        <div class="package-header">
                          <div class="package-header-title">
                            {{ packageItem.goodsName }}
                          </div>
                          <!-- <van-icon :name="customIcon" style="padding-left: 8px"  :class="{ overturn: isOverturn }"/> -->
                          <img
                            :src="customIcon"
                            class="package-img-icon"
                            v-if="packageItem.itemType == '2'"
                            :class="{
                              overturn: packageItem.isShow
                            }"
                          />
                        </div>
                        <div class="pd-package-main">
                          <div class="package-main"  :class="{ 'no-bottom-border': packageIndex === v.payGoodsdtl.length - 1}">
                          <div class="package-main-num">
                            数量：{{ packageItem.realQty }}
                          </div>
                          <div class="package-main-num" v-if="packageItem.uomName">
                            单位：{{ packageItem.uomName }}
                          </div>
                          <div class="package-main-price">
                            ￥{{ formatNumber(packageItem.totalAmt) }}
                          </div>
                        </div>
                        </div>
                  
                      </template>
                      <template v-slot:default>
                        <div
                          class="package-footer"
                          v-for="(
                            packageGoods, packageGoodsInex
                          ) in packageItem.goodsPriceInfos"
                          :key="packageGoodsInex"
                          @click.stop=""
                        >
                          <div class="package-footer-name">
                            {{ packageGoods.goodsName }}
                          </div>
                          <div class="package-footer-value">
                            <div class="package-specifications">
                              规格：{{ packageGoods.standard }}
                            </div>
                            <div class="package-num">
                              ×{{ packageGoods.realQty }}
                            </div>
                            <div class="package-price">
                              ￥{{ formatNumber(packageGoods.realAmt) }}
                            </div>
                          </div>
                        </div>
                      </template>
                    </van-collapse-item>
                  </van-collapse>
                </div>
                <div class="pd-title-all">
                  <div class="title-all">
                    <div class="title-product">{{v.mainGoodsCount}}份 {{v.mainCount}}项 &nbsp;</div>
                    <div class="title-time spe">
                      合计:<span class="title-time-fff" >￥{{ formatNumber(v.totalAmt) }}</span>
                    </div>
                  </div>
                  <div class="yh-show-box" :class="{'borderNone': !v.isExpanded }"   @click="toggleExpand(v, k, index)">
                       <div class="yh-showname">{{ v.isExpanded ? '收起' : '展开' }}</div>
                       <img :src="v.isExpanded ? 'https://oss.jtmckj.com/manage/home/retract-icon.png' : 'https://oss.jtmckj.com/manage/home/open-icon.png'" alt="">
                  </div>
                </div>
             
                 <div class="main-content-all"  :class="{ 'diaplayClass': !v.isExpanded, 'oppenClass': v.isExpanded }">
                  <div class="content-all-upper">
                    <div class="upper-title">优惠总金额：<span style="color: #ccc;">￥{{v.disTotalAmt}}</span></div>
                    <div class="upper-value">
                        <div class="value-top-left">赠送优惠：{{ v.storeDisAmt }}</div>
                        <div class="value-top-left">折扣优惠：{{ v.disAmt }}</div>
                        <div class="value-top-left">会员优惠：{{ v.vipDisAmt }}</div>
                        <div class="value-top-left">抹零：{{ v.smallChange }}</div>
                        <div class="value-top-left">团购券优惠：{{ v.ticketGroupAmt }}</div>
                    </div>
                  </div>
                  <div class="content-all-upper">
                    <div class="upper-title">其他金额：<span style="color: #ccc;">￥{{v.otherTotalAmt}}</span></div>
                    <div class="upper-value">
                        <div class="value-top-left">服务费：{{ v.serviceAmt }}</div>
                        <div class="value-top-left">补低消差额：{{ v.addMinConsume }}</div>
                        <div class="value-top-left">不找赎：{{ v.notGiveChange }}</div>
                    </div>
                  </div>
                </div>
                <div class="details-container-footer">
                    <div class="container-footer-header jt-footer-header-pd" :class="{'paddingNone': !v.isExpay, 'notpaddingNone': v.isExpay }">
                      <div class="footer-header-title">支付记录</div>
                      <div class="jt-pay-showbox"  @click="toggleExpay(v, k, index)">
                           <div class="jt-showText">{{ v.isExpay ? '收起' : '展开' }}</div>
                           <img :src="v.isExpay ? 'https://oss.jtmckj.com/manage/home/retract-icon.png' : 'https://oss.jtmckj.com/manage/home/open-icon.png'" alt="">
                      </div>

                    </div>
                    <!-- :class="{ isShow: showAllPayInfo }" -->
                    <div
                      class="container-footer-main"
                      :class="{ 'diaplayClass': !v.isExpay, 'oppenClass': v.isExpay }"
                    >
                      <div
                        class="container-footer-item"
                        v-for="(payItem, payIndex) in v.payRecordList.slice(0,showItem)"
                        :key="payIndex"
                        :class="{ 'first-item': payIndex === 0 }"
                      >
                        <div class="footer-item-header">
                          <div class="serial">
                            支付流水号:{{ payItem.itemCode }}
                          </div>
                          <div class="method" v-if="payItem.payTypeName === '现金'">
                            现金支付
                          </div>
                          <div
                            class="method"
                            v-if="
                              payItem.payTypeName === '微信' ||
                              payItem.payTypeName === '支付宝'
                            "
                          >
                            线上支付
                          </div>
                          <div class="method" v-if="payItem.payTypeName === '赠送'">
                            赠送支付
                          </div>
                          <div class="method" v-if="payItem.payTypeName === '会员卡'">
                            会员卡支付
                          </div>
                        </div>
                        <div class="footer-item-main">
                          <div class="item-li">
                            <div class="item-li-left">支付时间</div>
                            <div class="item-li-right">
                              {{ dayjs(payItem.payDate).format('YYYY-MM-DD') }}
                              {{ dayjs(payItem.payDate).format('HH:mm:ss') }}
                            </div>
                          </div>
                          <div class="item-li">
                            <div class="item-li-left">支付金额</div>
                            <div class="item-li-right">
                              ￥{{ payItem.payAmt}}
                            </div>
                          </div>
                          <div class="item-li">
                            <div class="item-li-left">支付方式</div>
                            <div class="item-li-right">{{ payItem.payTypeName }}</div>
                          </div>
                        </div>
                      </div>
                    </div>
                </div>
              </div>
              <div class="container-footer-footer jt-bt-border" @click="showAll(index)" style="background: #222226;padding: 10px 0;">
                      <van-icon
                        :name="v_triangle2"
                        class="footer-footer-icon"
                        :class="{ overturn: isPayOverturn }"
                      />
                    </div>
            </div>
          </div>
          <div class="details-container-main">
            <div class="container-main-header" :class="{ 'jt-border-radious': takeWineRecord.length < 1 }">
              <div class="main-header-title">取酒记录</div>
            </div>
            <div class="container-main-height" >
                <div class="wine-record jt-bt-border" v-for="(v,k) in takeWineRecord" :key="k">
                  <div class="main-content-time" style="background: #222226;">
                    <div class="time-title">取酒时间：{{v.takeDate ? dayjs(v.takeDate).format('YYYY-MM-DD HH:mm:ss') : '--'}}</div>
                </div>
                  <div class="wine-record-item">
                    <div class="item-top">
                      <div class="item-left">{{ v.goodsName }}</div>
                      <div class="item-right">会员：{{ v.memberName }}</div>
                    </div>
                    <div class="item-bottom">
                      <div class="item-left">数量：{{ v.qty }}</div>
                      <div class="item-right">单位：{{ v.uomName }}</div>
                    </div>
                  </div>
                </div>
            </div>
          </div>
          <div class="details-container-main">
            <div class="container-main-header"  style="border-bottom: 1px solid  #383840;" :class="{ 'jt-border-radious': item.unPayGoods.length < 1 }">
              <div class="main-header-title">未结账商品</div>
              <div class="main-header-pay" v-if="item.unPayGoods.length > 0" @click="goTodeal(item)">
                    <div class="header-name">去结账</div>
                     <img src="https://oss.jtmckj.com/manage/home/yellow-arrow.png" alt="">
              </div>
            </div>
            <div
              class="container-main-height"
              :class="{ isShow: showAllGoodsInfo }"
            >
              <!-- <div
                class="container-main-content"
                v-for="(v, k) in item.unPayGoods.slice(0, itemNumber)"
                :key="k"
              > -->
              <div
                class="container-main-content jt-bt-border"
                v-for="(v, k) in item.unPayGoods"
                :key="k"
              >
                <div
                  class="main-content-item"
                  v-for="(vi, ki) in v.unPayGoodsdtl"
                  :key="ki"
                >
                  <div v-if="!vi.goodsPriceInfos">
                    <div class="content-item-name">
                      {{ vi.goodsName }}
                    </div>
                    <div class="content-item-value">
                      <div class="item-value-specifications">
                        规格：{{ vi.standard }}
                      </div>
                      <div class="item-value-num">×{{ vi.realQty }}</div>
                      <div class="item-value-price">
                        ￥{{ formatNumber(vi.totalAmt) }}
                      </div>
                    </div>
                  </div>
                </div>
                <div>
                  <van-collapse
                    v-model="activeNames"
                    class="main-content-package"
                    :accordion="false"
                    :is-link="false"
                    v-for="(packageItem, packageIndex) in v.unPayGoodsdtl"
                    :key="packageIndex"
                  >
                    <van-collapse-item
                      :name="packageItem.goodsCode + packageIndex"
                      @click="toggleActive('未结账',index, k, packageIndex)"
                      v-if="packageItem.goodsPriceInfos"
                    >
                      <template v-slot:title>
                        <div class="package-header">
                          <div class="package-header-title">
                            {{ packageItem.goodsName }}
                          </div>
                          <!-- <van-icon :name="customIcon" style="padding-left: 8px"  :class="{ overturn: isOverturn }"/> -->
                          <img
                            :src="customIcon"
                            class="package-img-icon"
                            v-if="packageItem.itemType == '2'"
                            :class="{
                              overturn: packageItem.isShow
                            }"
                          />
                        </div>
                        <div class="pd-package-main">
                        <div class="package-main">
                          <div class="package-main-num">
                            数量：{{ packageItem.realQty }}
                          </div>
                          <div class="package-main-num" v-if="packageItem.uomName">
                            单位：{{ packageItem.uomName }}
                          </div>
                          <div class="package-main-price">
                            ￥{{ formatNumber(packageItem.totalAmt) }}
                          </div>
                        </div>
                      </div>
                      </template>
                      <template v-slot:default>
                        <div class="jt-pd20">
                          <div class="package-footer"
                          v-for="(
                            packageGoods, packageGoodsInex
                          ) in packageItem.goodsPriceInfos"
                          :key="packageGoodsInex"
                          @click.stop=""
                        >
                          <div class="package-footer-name">
                            {{ packageGoods.goodsName }}
                          </div>
                          <div class="package-footer-value">
                            <div class="package-specifications">
                              规格：{{ packageGoods.standard }}
                            </div>
                            <div class="package-num">
                              ×{{ packageGoods.realQty }}
                            </div>
                            <div class="package-price">
                              ￥{{ formatNumber(packageGoods.realAmt) }}
                            </div>
                          </div>
                        </div>
                        </div>
                      </template>
                    </van-collapse-item>
                  </van-collapse>
                </div>
                <div class="pd-title-all" style="padding-bottom: 20px;">
                  <div class="title-all">
                    <div class="title-product">{{v.mainGoodsCount}}份 {{v.mainCount}}项 &nbsp;</div>
                    <div class="title-time spe">
                      合计:<span class="title-time-fff" >￥{{ formatNumber(v.totalAmt) }}</span>
                    </div>
                  </div>
              </div>
              </div>
            </div>

          </div>
          <div class="details-container-main">
            <div class="container-main-header" :class="{ 'jt-border-radious': item.payPendingGoods.length < 1 }">
              <div class="main-header-title">支付中商品</div>
              <div class="main-header-pay" @click="goToPay(item)" v-if="item.payPendingGoods.length > 0">
                    <div class="header-name">去支付</div>
                     <img src="https://oss.jtmckj.com/manage/home/yellow-arrow.png" alt="">
              </div>
            </div>
            <div
              class="container-main-height"
              :class="{ isShow: showAllGoodsInfo }"
            >
             
              <div
                class="container-main-content jt-bt-border"
                v-for="(v, k) in item.payPendingGoods"
                :key="k"
              >
                <div class="main-content-title" style="justify-content: start;">
                  <div class="title-oderNum">结账单号:{{ v.payBatchCode }}</div>
                  <div></div>
                  <!-- <div class="title-all">
                    <div class="title-product">{{v.mainGoodsCount}}份 {{v.mainCount}}项 &nbsp;</div>
                    <div class="title-time spe">
                      合计:￥{{ formatNumber(v.totalAmt) }}
                    </div>
                  </div> -->
                </div>
                <div
                  class="main-content-item"
                  v-for="(vi, ki) in v.payGoodsdtl"
                  :key="ki"
                >
                  <div v-if="!vi.goodsPriceInfos">
                    <div class="content-item-name">
                      {{ vi.goodsName }}
                    </div>
                    <div class="content-item-value">
                      <div class="item-value-specifications">
                        规格：{{ vi.standard }}
                      </div>
                      <div class="item-value-num">×{{ vi.realQty }}</div>
                      <div class="item-value-price">
                        ￥{{ formatNumber(vi.totalAmt) }}
                      </div>
                    </div>
                  </div>
                </div>
                <div>
                  <van-collapse
                    v-model="activeNames"
                    class="main-content-package"
                    :accordion="false"
                    :is-link="false"
                    v-for="(packageItem, packageIndex) in v.payGoodsdtl"
                    :key="packageIndex"
                  >
                    <van-collapse-item
                      :name="packageItem.goodsCode + packageIndex"
                      @click="toggleActive('未结账',index, k, packageIndex)"
                      v-if="packageItem.goodsPriceInfos"
                    >
                      <template v-slot:title>
                        <div class="package-header">
                          <div class="package-header-title">
                            {{ packageItem.goodsName }}
                          </div>
                          <!-- <van-icon :name="customIcon" style="padding-left: 8px"  :class="{ overturn: isOverturn }"/> -->
                          <img
                            :src="customIcon"
                            class="package-img-icon"
                            v-if="packageItem.itemType == '2'"
                            :class="{
                              overturn: packageItem.isShow
                            }"
                          />
                        </div>
                        <div class="pd-package-main">
                        <div class="package-main">
                          <div class="package-main-num">
                            数量：{{ packageItem.realQty }}
                          </div>
                          <div class="package-main-num" v-if="packageItem.uomName">
                            单位：{{ packageItem.uomName }}
                          </div>
                          <div class="package-main-price">
                            ￥{{ formatNumber(packageItem.totalAmt) }}
                          </div>
                        </div>
                      </div>
                      </template>
                      <template v-slot:default>
                        <div class="jt-pd20">
                          <div
                          class="package-footer"
                          v-for="(
                            packageGoods, packageGoodsInex
                          ) in packageItem.goodsPriceInfos"
                          :key="packageGoodsInex"
                          @click.stop=""
                        >
                          <div class="package-footer-name">
                            {{ packageGoods.goodsName }}
                          </div>
                          <div class="package-footer-value">
                            <div class="package-specifications">
                              规格：{{ packageGoods.standard }}
                            </div>
                            <div class="package-num">
                              ×{{ packageGoods.realQty }}
                            </div>
                            <div class="package-price">
                              ￥{{ formatNumber(packageGoods.realAmt) }}
                            </div>
                          </div>
                        </div>
                        </div>
                      </template>
                    </van-collapse-item>
                  </van-collapse>
                </div>
                <div class="details-container-footer">
                    <!-- <div class="container-footer-header">
                      <div class="footer-header-title">支付记录</div>
                    </div> -->
                    <div class="container-footer-header" :class="{'paddingNone': !v.isExpay, 'notpaddingNone': v.isExpay }" style="background:#28282e ;">
                      <div class="footer-header-title">支付记录</div>
                      <div class="jt-pay-showbox"  @click="togglepropay(v, k, index)">
                           <div class="jt-showText">{{ v.isExpay ? '收起' : '展开' }}</div>
                           <img :src="v.isExpay ? 'https://oss.jtmckj.com/manage/home/retract-icon.png' : 'https://oss.jtmckj.com/manage/home/open-icon.png'" alt="">
                      </div>
                    </div>
                    <div
                      class="container-footer-main"
                      :class="{ 'diaplayClass': !v.isExpay, 'oppenClass': v.isExpay }"
                    >
                      <div
                        class="container-footer-item"
                        v-for="(payItem, payIndex) in v.payRecordList.slice(
                          0,
                          showItem
                        )"
                        :key="payIndex"
                        :class="{ 'first-item': payIndex === 0 }"
                      >
                        <div class="footer-item-header">
                          <div class="serial">
                            支付流水号:{{ payItem.itemCode }}
                          </div>
                          <div class="method" v-if="payItem.payTypeName === '现金'">
                            现金支付
                          </div>
                          <div
                            class="method"
                            v-if="
                              payItem.payTypeName === '微信' ||
                              payItem.payTypeName === '支付宝'
                            "
                          >
                            线上支付
                          </div>
                          <div class="method" v-if="payItem.payTypeName === '赠送'">
                            赠送支付
                          </div>
                          <div class="method" v-if="payItem.payTypeName === '会员卡'">
                            会员卡支付
                          </div>
                        </div>
                        <div class="footer-item-main">
                          <div class="item-li">
                            <div class="item-li-left">支付时间</div>
                            <div class="item-li-right">
                              {{ dayjs(payItem.payDate).format('YYYY-MM-DD') }}
                              {{ dayjs(payItem.payDate).format('HH:mm:ss') }}
                            </div>
                          </div>
                          <div class="item-li">
                            <div class="item-li-left">支付金额</div>
                            <div class="item-li-right">
                              ￥{{ payItem.payAmt}}
                            </div>
                          </div>
                          <div class="item-li">
                            <div class="item-li-left">支付方式</div>
                            <div class="item-li-right">{{ payItem.payTypeName }}</div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="container-footer-footer" @click="showPayAll(index)" style="background: #222226;">
                      <van-icon
                        :name="v_triangle2"
                        class="footer-footer-icon"
                        :class="{ overturn: isPayOverturn }"
                      />
                    </div>
                </div>
               
              </div>
            </div>

          </div>
          
        </div>
      </van-list>
    </div>
    <div class="jt-container" v-else>
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="loadData"
        :immediate-check="false"
        offset="100"
      >
        <div class="jt-header-box" v-if="tableData[0]">
              <div class="jt-top-bgf">
                <div class="rooName-flex">
                    <div class="rooname">桌号：{{ params.roomName }}</div>
                    <div class="pesron">（人数 {{tableData[0].arrivedPeoperCount}} 人）</div>
              </div>
              <div class="jt-kt-date">开台时间：{{ params.openTime }}</div>
              <div class="jt-kt-marsk">开台备注：{{ tableData[0].remark }}</div>
              </div>
              <div class="jt-cet-box">
                   <div class="jt-tdh">台单号：{{ params.consumeCode }}</div>
                   <div class="jt-price">总金额：￥10000.00(含赠送)</div>
                   <div class="jt-tdh">赠送：￥200.00</div>
                   <div class="jt-tdh">已收：￥9500.00</div>
                   <div class="jt-line"></div>
              </div>
              <div class="jt-bot-box">
                     <div class="jy-item">
                           <div class="top-dw">{{ tableData[0].mainCount }}项 {{ tableData[0].mainGoodsCount }} 份</div>
                           <div class="bot-text">已点商品</div>
                     </div>
                     <div class="jy-item">
                           <div class="top-dw">10000.00</div>
                           <div class="bot-text">总金额</div>
                     </div>
                     <div class="jy-item">
                           <div class="top-dw">300.00</div>
                           <div class="bot-text">优惠金额</div>
                     </div>
                     <div class="jy-item">
                           <div class="top-dw" style="color:#FF3333 ;">200.00</div>
                           <div class="bot-text">待支付金额</div>
                     </div>
              </div>
        </div>
        <div class="jt-score">
             <div class="score-label">来源</div>
             <div class="score-text">{{ params.maintainUserName }}</div>
        </div>
        <!-- <template v-for="(packageItem, packageIndex) in v.payGoodsdtl" :key="packageIndex">   -->
        <template v-for="(item, index) in tableData" :key="index">  
          <div class="jt-product-box">
              <template v-for="(v, k) in item.payGoods.slice(0, itemNumber)" :key="k">
                    <template  v-for="(packageItem, packageIndex) in v.payGoodsdtl" :key="packageIndex">
                            <!-- 单品start-->
                              <div class="Single-product" v-if="packageItem.itemType == '1'">
                                    <div class="jt-top-1">
                                        <div class="product-name">{{ packageItem.goodsName }}<span class="product-num">*2</span></div>
                                        <div class="jt-price">￥{{ v.totalAmt }}</div>
                                    </div>
                                    <div class="jt-top-2">
                                          <div class="num-text">数量：x1</div>
                                          <div class="cp-btn" v-if="v.prodMethod == '未出品'" @click="changeGoodsType(v)">出品</div>
                                          <div class="cp-btn" v-else>出品</div>
                                    </div>
                                    <div class="jt-top-3">
                                            <div class="jt-left">
                                                <div class="xdr">下单人：{{ v.orderUser }}</div>
                                                <div class="time">{{ v.orderTime }}</div>
                                            </div>
                                            <div class="jt-left">
                                                <div class="xdr">营销员：张自在</div>
                                                <div class="time" style="text-align: right;">赠送</div>
                                            </div>
                                    </div>
                              </div>
                              <!-- 单品end-->
                              <!-- 套餐start -->
                              <div class="setmenu-product" v-if="packageItem.itemType == '2'">
                                    <div class="jt-top-1">
                                            <div class="product-name">
                                            <!-- </span>巅峰特调<span class="product-num">*1</span> -->
                                              <span class="zp-text">赠</span>{{ packageItem.goodsName }}<span class="product-num">*{{packageItem.realQty}}</span></div>
                                            <div class="jt-price">￥{{ packageItem.totalAmt }}</div>
                                    </div>
                                    <div class="jt-top-2">
                                          <div class="num-text" v-if="packageItem.goodsPriceInfos">数量：{{ packageItem.goodsPriceInfos.length }}</div>
                                           111
                                          <div class="cp-btn" v-if="v.prodMethod == '未出品'" @click="changeGoodsType(v)">出品</div>
                                          <div class="cp-btn" v-else>出品</div>
                                    </div>
                                    <div class="jt-tc-marsk">套餐内容：巅峰*1，威士忌可乐桶 3L*2</div>
                                    <div class="jt-top-3">
                                            <div class="jt-left">
                                                <div class="xdr">下单人：张自在</div>
                                                <div class="time">03-09 20:02</div>
                                            </div>
                                            <div class="jt-left">
                                                <div class="xdr">营销员：张自在</div>
                                                <div class="time" style="text-align: right;">赠送</div>
                                            </div>
                                    </div>
                              </div>
                              <!-- 套餐end -->
                    </template>

              </template>

               <!-- 取酒记录start -->
               <!-- <div class="jt-wine-list">
                <div class="jt-top-1">
                        <div class="product-name"><span class="zp-text">寄存领取</span>轩尼诗<span class="product-num">*2</span></div>
                         <div class="jt-price">￥0.00</div>
                     </div>
                     <div class="jt-top-2">
                          <div class="num-text">数量：x0.6</div>
                     </div>
                     <div class="jt-top-3" style="border-bottom: none;">
                            <div class="jt-left">
                                 <div class="xdr">单位：瓶</div>
                                 <div class="time">03-09 20:02</div>
                            </div>
                            <div class="jt-left">
                                 <div class="xdr">会员：吴哈</div>
                            </div>
                     </div>

               </div> -->
               <!-- 取酒记录end -->   
        </div>
        <!-- 支付记录start -->
        <div class="jt-pay-continar">
              <div class="pay-title">支付记录</div>    
              <div class="container-footer-main">
                      <!-- <div class="container-footer-item" v-for="(payItem, payIndex) in v.payRecordList.slice(0,showItem)"
                        :key="payIndex" :class="{ 'first-item': payIndex === 0 }">
                        <div class="footer-item-header">
                          <div class="serial">支付流水号:{{ payItem.itemCode }}</div>
                          <div class="method" v-if="payItem.payTypeName === '现金'">
                            现金支付
                          </div>
                          <div class="method" v-if="payItem.payTypeName === '微信' || payItem.payTypeName === '支付宝'">
                            线上支付
                          </div>
                          <div class="method" v-if="payItem.payTypeName === '赠送'">
                            赠送支付
                          </div>
                          <div class="method" v-if="payItem.payTypeName === '会员卡'">
                            会员卡支付
                          </div>
                        </div>
                        <div class="footer-item-main">
                          <div class="item-li">
                            <div class="item-li-left">支付时间</div>
                            <div class="item-li-right">
                              {{ dayjs(payItem.payDate).format('YYYY-MM-DD') }}
                              {{ dayjs(payItem.payDate).format('HH:mm:ss') }}
                            </div>
                          </div>
                          <div class="item-li">
                            <div class="item-li-left">支付金额</div>
                            <div class="item-li-right">
                              ￥{{ payItem.payAmt}}
                            </div>
                          </div>
                          <div class="item-li">
                            <div class="item-li-left">支付方式</div>
                            <div class="item-li-right">{{ payItem.payTypeName }}</div>
                          </div>
                        </div>
                      </div> -->
                    </div>
        </div>
        <!-- 支付记录end -->
        </template>

      </van-list>
    </div>

  </page-wrap>
</template>
<script setup>
import { ref, reactive } from 'vue'
import ls from '@/lib/ls'
import { useRoute, useRouter } from 'vue-router'
import useAppStore from '@/store/app'
import useCartStore from '@/store/cart'

import { NavBar, Collapse, CollapseItem, showToast } from 'vant'
import dayjs from 'dayjs'
import v_triangle from '@/assets/svg/details/v_details-triangle.svg'
import v_triangle1 from '@/assets/svg/details/v_details-triangle1.svg'
import v_triangle2 from '@/assets/svg/details/v_triangle.svg'
import Api from '@/api'
import { onMounted } from 'vue'
import icon_tuan from '@/assets/images/common/icon_tuan.png'
import icon_zeng from '@/assets/images/common/icon_zeng.png'
import icon_dui from '@/assets/images/common/icon_dui.png'


const cartStore = useCartStore()
const appStore = useAppStore()
const route = useRoute()
const router = useRouter()
// 获取传过来的参数
const params = route.query
const brandCode = ref('')
//--------------------------------------数据-----------------------------------------------
const tableData = ref([])
//---------------------------------------------------------------------------保留两位小数--------------------------------------------------
function formatNumber (num) {
  if (num) {
    return num.toFixed(2)
  } else {
    return 0
  }
}
//--------------------------------------套餐折叠-----------------------------------------------
const activeNames = ref(['']) // 当前展开面板的 name
const customIcon = ref(v_triangle)
// 翻转三角按钮
const toggleActive = (title,index, k, packageIndex) => {
  if(title == '已结账'){
    tableData.value[index].payGoods[k].payGoodsdtl[packageIndex].isShow =
    !tableData.value[index].payGoods[k].payGoodsdtl[packageIndex].isShow
  }else{
    tableData.value[index].unPayGoods[k].unPayGoodsdtl[packageIndex].isShow =
    !tableData.value[index].unPayGoods[k].unPayGoodsdtl[packageIndex].isShow
  }
 
}
//--------------------------------------商品信息折叠-----------------------------------------------
const itemNumber = ref(2) // 要显示几条数据
const isOverturn = ref(false)
const showAllGoodsInfo = ref(false) // 商品信息全部显示
// 显示全部
const showAll = val => {
  showAllGoodsInfo.value = !showAllGoodsInfo.value
  const itemAll = tableData.value[val].payGoods.length // 总共多少条数据
  if (itemNumber.value === 2) {
    itemNumber.value = itemAll
  } else {
    itemNumber.value = 2
  }
  isPayOverturn.value = !isPayOverturn.value
}
// ---------------------------------------------  按钮 ----------------------------------------------------------
const isShowpage = ref(false) 

const headerProps = computed(() => {
  const r = {
    backFn: () => {
         // 获取当前路由路径
         const currentRoute = router.currentRoute.value.path;
         console.log(currentRoute,'123000')
      if (currentRoute === '/open/table') {
           router.push('/open')
      } else {
           router.push('/')
      }
    },
    operation: [
    {
      type: 'text',
      v: '切换',
      style: {
        background: 'none',
        color:'#FFAA00',
        borderRadius: '2px',
        padding: '5px 10px'
      },
      click () {
        isShowpage.value = !isShowpage.value
      }
    }
  ]
  }
  return r
})
// 去结账
const goTodeal = (e)=>{
      const d = ls.get('ROOM_DETAIL')
      console.log(d)
      if (d.consumeState != '3') {
        showToast('没有未支付的订单')
        return
      }
      ls.remove('CART_LIST')
      cartStore.cartList = []
      cartStore.tableInfo = {
        roomName: d.roomName,
        roomCode: d.roomCode,
        waiterUserCode: appStore.user_info.userCode,
        waiterUserName: appStore.user_info.userName,
        minConsume: d.minConsume,
        consumeCode: d.consumeCode,
        currentConsume: d.currentConsume,
        consumeMinConsume: d.consumeMinConsume,
        consumeRemark: d.consumeRemark
      }
      ls.set('TABLE_INFO', cartStore.tableInfo)
      cartStore.orderBatchCode = d.orderBatchCode
      cartStore.payBatchCode = d.payBatchCode
      ls.set('ORDER_BATCH_CODE', d.orderBatchCode)
      ls.set('PAY_BATCH_CODE', d.payBatchCode)
      router.push({
        path: `/open/orderConfirm`,
        query: { from: 'open' }
      })
     
}
// 去支付
const goToPay = (e)=>{
      const d = ls.get('ROOM_DETAIL')
      console.log(d)
      if (d.consumeState != '3') {
        showToast('没有未支付的订单')
        return
      }
      ls.remove('CART_LIST')
      cartStore.cartList = []
      cartStore.tableInfo = {
        roomName: d.roomName,
        roomCode: d.roomCode,
        waiterUserCode: appStore.user_info.userCode,
        waiterUserName: appStore.user_info.userName,
        minConsume: d.minConsume,
        consumeCode: d.consumeCode,
        currentConsume: d.currentConsume,
        consumeMinConsume: d.consumeMinConsume,
        consumeRemark: d.consumeRemark
      }
      ls.set('TABLE_INFO', cartStore.tableInfo)
      cartStore.orderBatchCode = d.orderBatchCode
      cartStore.payBatchCode = d.payBatchCode
      ls.set('ORDER_BATCH_CODE', d.orderBatchCode)
      ls.set('PAY_BATCH_CODE', d.payBatchCode)
  
  // 有支付中的订单
  router.push({
      path: '/open/orderCashier'
  })
      ls.set('PAY_TYPE', 3)
      
}

// 更新出品状态
const changeGoodsType = (e)=>{
  Api.Common.AppObjProcess.Do({
    functionName: 'UpdateGoodsPayType',
    contentData: {payBatchCode:e.payBatchCode}
  }).then(res=>{
    console.log(res,'更新出品状态成功')
    showToast('更新出品状态成功')
    loadData(true)
  })
}
//--------------------------------------支付记录折叠-----------------------------------------------
const showItem = ref(2) // 要显示几条数据
const isPayOverturn = ref(false)
const showAllPayInfo = ref(false) // 支付记录全部显示
// 显示全部
const showPayAll = val => {
  const showItemAll = tableData.value[val].payList.length // 总共多少条数据

  if (showItem.value === 2) {
    showItem.value = showItemAll
  } else {
    showItem.value = 2
  }
  showAllPayInfo.value = !showAllPayInfo.value
  isPayOverturn.value = !isPayOverturn.value
}
// -------------------------------------------------------加载  下拉刷新---------------------------------------------------------
//表单
const postForm = reactive({
  roomCode: '', // 房台号
  consumeCode: '', // 订单号
  pageIndex: 1,
  pageSize: 15,
  stratDate: '', // 开始时间
  endDate: '', // 结束时间
  // orderUser:ls.get('USER_INFO')?.userCode,
})
const loading = ref(false)
const finished = ref(false)
// const initBs = ref(0)
const loadData = async function (refresh = false) {
  if (refresh === true) {
    postForm.pageIndex = 1
    tableData.value = []
    finished.value = false
  }
  loading.value = true
 
  const resp = await Api.Common.AppObjProcess.Do({
    functionName: 'GetRoomOpeHistoryDetailNewV1',
    contentData: postForm
  })
  console.log(resp.result);
  if (refresh === true) {
    if (resp.result.length !== postForm.pageSize) {
      finished.value = true
    }
  }
 
  Array.prototype.push.apply(tableData.value, resp.result)
  console.log(tableData.value,'tableData详情');
  tableData.value.map(item=> {
    if(item.payGoods) return
      item.payGoods.map(v=> {
        v.isExpanded = true;
        v.isExpay = true
      })
      if(item.payPendingGoods) return
      item.payPendingGoods.map(v=> {
        v.isExpay = true

      })

  })

  if (resp.result.length > 0) {
    postForm.pageIndex++
  } else {
    finished.value = true
  }
  loading.value = false
}
const takeWineForm = ref({
  consumeCode:'',
  roomCode:'',
})
const takeWineRecord = ref([])
const takeWine = ()=>{
  Api.Common.AppObjProcess.Do({
    functionName: 'GetPosWinTakeRecord',
    contentData: takeWineForm.value
  }).then(res=>{
    console.log(res,'takeWineRecord');
    takeWineRecord.value = res.result
    
  }).catch(err=>{
    console.log(err);
    
  })
}


//支付优惠金额切换
const toggleExpand = (payGoods, k, index)=> {
         tableData.value[index].payGoods[k].isExpanded = !tableData.value[index].payGoods[k].isExpanded;
}

//支付记录切换
const toggleExpay = (payGoods, k, index)=> {
         tableData.value[index].payGoods[k].isExpay = !tableData.value[index].payGoods[k].isExpay;
}

//支付商品支付记录切换
const togglepropay = (payPendingGoods, k, index)=> {
          tableData.value[index].payPendingGoods[k].isExpay = !tableData.value[index].payPendingGoods[k].isExpay;
}
 

// -----------------------------------------------------初始化--------------------------------------------------
const onInit = () => {
  brandCode.value = ls.get('BRAND_CODE')
  postForm.roomCode = params.roomCode
  takeWineForm.value.roomCode = params.roomCode
  if (params.consumeCode) {
    postForm.consumeCode = params.consumeCode
    takeWineForm.value.consumeCode = params.consumeCode
  }
  if (params.stratDate) {
    postForm.stratDate = params.stratDate
    postForm.endDate = params.endDate
  }

  loadData(true)
  takeWine()
 
}
onInit()
</script>
<style scoped lang="scss">
::v-deep(.van-cell) {
  padding: 0;
}
::v-deep(.van-cell--clickable) {
  background: #28282e;
}
::v-deep(.van-cell__right-icon) {
  display: none;
}
::v-deep(.van-hairline--top-bottom:after, .van-hairline-unset--top-bottom:after) {
  border: none;
}
::v-deep(.van-collapse-item__content) {
  padding: 0;
  background: #28282e;
}
::v-deep(.van-collapse-item__title--expanded:after) {
  border: none;
}
::v-deep(.van-icon__image) {
  width: 20px;
  height: 20px;
}
::v-deep(.van-icon__image.clicked) {
  transform: rotate(180deg);
}

.details-container {
  //   padding: 0px 10px 10px;
  .header-h2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 13px;
    h2 {
      background: #262522;
      border-radius: 4px;
      padding: 12px 13px;
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #ffffff;
      white-space: nowrap;
      line-height: 18px;
      margin: 10px 12px 12px 0px;
    }
    .h2-table{
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 14px;
      color: #FFFFFF;
      line-height: 14px;
    }
  }
  .jt-header-box {
    padding: 0 12px 10px;
    .jt-header-pd {
      background: #222226;
      border-radius: 8px;
      padding: 0 12px 9px 12px;
    }
    .jt-td-flex {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #383840;
      height: 40px;
      .jt-td-code {
        font-weight: 500;
        font-size: 13px;
        color: #CCCCCC;
      }
      .jt-td-price {
        font-weight: 500;
        font-size: 12px;
        color: #666666;
      }
    }
    .jt-center-flex {
      padding-right: 23px;
      display: flex;
      justify-content: space-between;
         .jt-skflex-box {
             padding-top: 9px;
            //  border-bottom: 1px solid #383840;
              .jt-item {
                    display: flex;
                    margin-bottom: 9px;
                   .jt-label {
                    // width: 76px;
                    width: 60px;
                    text-align:right;
                    font-weight: 500;
                    font-size: 12px;
                    color: #666666;
                   }
                   .jt-value {
                    font-weight: 500;
                    font-size: 12px;
                    color: #666666;
                   }
              }
         }
         .jt-skflex-mt {
          .jt-item {
            .jt-label {
              width: 76px;
            }
          }
         }
        
    }
    .jt-mask {
      border-top: 1px solid #383840;
      padding-top: 9px;
      font-weight: 500;
      font-size: 12px;
      color: #666666;
    }
  }
  .details-container-header {
    .container-header-item {
      padding: 0 0 20px 12px;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #cccccc;
      line-height: 16px;
      .item-preferential {
        padding: 2px 0px 2px 6px;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #999999;
        line-height: 12px;
      }
    }
  }

  .details-container-main {
    margin: 0px 12px 10px 12px;
    .container-main-header {
      // border-bottom: 1px solid #383840;
      background: #28282E;
      display: flex;
      justify-content: space-between;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      // background-image: url('@/assets/images/open/i_details_gradient.png');
      // background-repeat: no-repeat;
      // background-position: center center;
      // background-size: cover;
    
      .main-header-title {
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #FFEECC;
        line-height: 18px;
        padding: 17px 0px 17px 12px;
      }
      .main-header-pay {
        display: flex;
        align-items: center;
        padding-right: 12px;
            .header-name {
              font-weight: 500;
              font-size: 14px;
              color: #FFAA00;
              margin-right: 5px;
            }
            img {
              margin-top: 2px;
              width: 6px;
              height: 9px;
            }
      }
      .main-header-value {
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 14px;
        color: #FFFFFF;
        line-height: 30px;
        width: 60px;
        height: 30px;
        background: #5C5C66;
        border-radius: 4px;
        text-align: center;
        margin-top: 10px;
        margin-right: 12px;
      }
    }
    .container-main-height {
      max-height: 2000px;
      overflow: hidden;
      transition: max-height 2s ease;
      will-change: max-height;
      &.isShow {
        max-height: 100%;
      }
      .container-main-content {
        background: #222226;
        margin-bottom: 10px;
        .main-content-title {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          font-size: 12px;
          height: 40px;
          padding: 0 12px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #cccccc;
          background:#222226;
          &.spe{
            justify-content: space-between;
          }

          .title-time{
            color: #FF3333;
            &.spe{
              color: #FFAA00;
            }
          }
        }
        .content-all-btn{
            width: 50px;
            height: 24px;
            background: #5C5C66;
            border-radius: 2px;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 14px;
            color: #FFFFFF;
            line-height: 24px;
            text-align: center;
          }
          .content-all-tip{
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 14px;
            color: #999999;
            line-height: 24px;
            text-align: center;
          }
        .main-content-all{
          position: relative;
          padding-top: 12px;
          .content-all-upper{
            .upper-title{
              font-family: PingFang SC;
              font-weight: 500;
              font-size: 14px;
              color: #999999;
              line-height: 16px;
              padding-bottom: 12px;
              padding-left: 12px;
            }
            .upper-value{
              display: flex;
              justify-content: space-between;
              flex-wrap: wrap;
              padding: 0 20px;
              color: #000;
              .value-top-left{
                // flex-basis: 50%;
                // flex: 1;
                width: 50%;
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 12px;
                color: #999999;
                line-height: 12px;
                padding-bottom: 10px
              }
            }
          }
        }
        .main-content-time{
          background: #28282E;
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 30px;
          // background: #222226;
          // padding: 9px 0 24px;
          padding: 12px 9px 10px 9px;
          .time-line{
            width: 60px;
            height: 1px;
            background: #999999;
          }
          .time-title{
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 13px;
            color: #999999;
            line-height: 13px;
          }
        }
        .main-content-back{
          height: 10px;
          background: #28282E;
        }
        .main-content-item {
          .content-item-name {
            padding: 0 0 12px 22px;
            font-size: 16px;
            color: #ffffff;
            line-height: 16px;
          }
          .content-item-value {
            display: flex;
            flex-wrap: wrap;
            padding: 0 34px 20px 34px;
            div {
              font-size: 14px;
              flex-basis: 33.33%;
              font-family: PingFang SC;
              font-weight: 500;
              color: #cccccc;
              line-height: 14px;
            }
            .item-value-specifications {
              // margin-left: 34px;
            }
            .item-value-num {
              text-align: center;
            }
            .item-value-price {
              color: #ffffff;
              text-align: right;
            }
          }
        }
        .main-content-package {
          .package-header {
            margin-top: 12px;
            display: flex;
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #ffffff;
            line-height: 16px;
            .package-img-icon {
              width: 16px;
              height: 16px;
              margin-left: 8px;
              &.overturn {
                transform: rotate(180deg);
              }
            }

            &-title {
              padding: 0 0 14px 22px;
            }
          }
          .pd-package-main {
            padding: 0 12px;
            .package-main {
            display: flex;
            justify-content: space-between;
            padding: 0 34px 12px 22px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            line-height: 14px;
            border-bottom: 1px solid #383840;
            &-num {
              color: #666666;
            }
            &-price {
              color: #666666;
            }
              }
            .no-bottom-border {
            border-bottom: none !important;
            }
          }

       

          .package-footer {
            .package-footer-name {
              padding: 0 0 12px 34px;
              padding-left: 34px;
              font-size: 16px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #ffffff;
              line-height: 16px;
            }
            .package-footer-value {
              display: flex;
              flex-wrap: wrap;
              padding: 0 34px 20px 46px;
              div {
                font-size: 14px;
                flex-basis: 33.33%;
                font-family: PingFang SC;
                font-weight: 500;
                color: #666666;
                line-height: 14px;
              }
              .package-specifications {
              }
              .package-num {
                text-align: center;
                flex-basis: calc(33.33% - 12px);
              }
              .package-price {
                color: #666666;
                text-align: right;
                flex-basis: calc(33.33% + 12px);
              }
            }
          }
        }
        .main-content-footer {
          display: flex;
          justify-content: space-between;
          align-content: center;
          font-family: PingFang SC;
          font-weight: 500;
          margin: 0 12px 0 12px;
          border-bottom: 1px solid #383840;
          .footer-order {
            padding: 4px 8px 4px 8px;
            font-size: 13px;
            color: #cccccc;
            line-height: 13px;
            background: #45454d;
            border-radius: 2px;
            margin-bottom: 20px;
          }
          .footer-right {
            display: flex;
            margin-bottom: 22px;
            // align-content:flex-end;

            &-all {
              font-size: 12px;
              color: #cccccc;
              line-height: 12px;
              align-self: flex-end;
            }
            &-value {
              font-size: 18px;
              color: #ffaa00;
              line-height: 18px;
              align-self: flex-end;
            }
          }
        }
      }
      .wine-record{
        width: 100%;
        background-color: #28282e;
        // padding: 0px 24px 10px;
        .main-content-time{
          padding-left: 13px;
          // background: #222226;
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 30px;
          white-space: nowrap;
          .time-line{
            width: 40px;
            height: 1px;
            background: #999999;
          }
          .time-title{
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 13px;
            color: #999999;
            line-height: 13px;
          }
        }
        .wine-record-item{
          margin-top: 10px;
          padding-left: 22px;
          padding-right: 20px;
          font-family: PingFang SC;
            font-weight: 500;
            font-size: 16px;
            color: #FFFFFF;
            line-height: 16px;
            margin-bottom: 10px;
          .item-top{
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 10px;
          }
          .item-bottom{
            padding-left: 12px;
            padding-bottom: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .item-left{
              font-weight: 500;
              font-size: 14px;
              color: #666666;
          }
          .item-right{
            font-weight: 500;
            font-size: 14px;
            color: #666666;
          }
          }
         
        }
      }
    }

    .container-main-footer {
      margin: 0 auto;
      background: #28282e;
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
      display: flex;
      justify-content: center;
      align-items: center;
      .main-footer-icon {
        padding: 10px 0;
      }
      .overturn {
        transform: rotate(180deg);
      }
    }
  }
  .details-container-footer {
    // margin: 0px 12px 10px 12px;
    .container-footer-header {
      // border-top: 1px dashed #999999;;
      // border-top-left-radius: 8px;
      // border-top-right-radius: 8px;
      // background-image: url('@/assets/images/open/i_details_gradient.png');
      // background-repeat: no-repeat;
      // background-position: center center;
      // background-size: cover;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-right: 12px;
      background: #28282e;
      padding: 17px 12px 0px 12px;
      .footer-header-title {
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #999999;
        line-height: 18px;
        
      }
      .jt-pay-showbox {
        display: flex;
        align-items: center;
        .jt-showText {
          font-weight: 500;
          font-size: 12px;
          color: #999999;
          margin-right: 5px;
        }
        img {
          width: 9px;
          height: 5px;
        }
      }
    }
    .container-footer-main {
      max-height: 700px;
      overflow: hidden;
      background: #28282e;
      padding: 10px 12px 12px 12px;
      &.isShow {
        max-height: 100%;
      }
      .container-footer-item {
        background: #222226;
        border-radius: 4px;
        margin-top: 10px;
        &.first-item {
          margin-top: 0px;
        }
        .footer-item-header {
          display: flex;
          justify-content: space-between;
          .serial {
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #666666;
            line-height: 12px;
            padding: 19px 0 18px 12px;
          }
          .method {
            margin: 12px 12px 12px 0;
            padding: 6px 0px;
            // background: #454c4a;
            border-radius: 4px;
            font-size: 13px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #FFEECC;
            line-height: 13px;
          }
        }
        .footer-item-main {
          padding-bottom: 2px;
          .item-li {
            display: flex;
            justify-content: space-between;
            font-family: PingFang SC;
            font-weight: 500;
            &-left {
              padding: 0px 0px 18px 20px;
              font-size: 14px;
              color: #666666;
              line-height: 14px;
            }
            &-right {
              padding: 0px 20px 18px 0;
              font-size: 14px;
              color: #999999;
              line-height: 14px;
            }
          }
        }
      }
    }
    .container-footer-footer {
      margin: 0 auto;
      background: #28282e;
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
      display: flex;
      justify-content: center;
      align-items: center;
      .footer-footer-icon {
        padding: 10px 0;
      }
      .overturn {
        transform: rotate(180deg);
      }
    }
  }
}
.title-oderNum {
  color: #666666 !important;
}
.icon-list{
  display: flex;
  align-items: center;
  justify-content: space-between;
  .title-icon{
    width: 20px;
    height: 20px;
  }
}
.container-footer-footer{
  width: 100%;
  text-align: center;
  .overturn {
    transform: rotate(180deg);
  }
}


.pd-title-all {
  padding: 0 12px;
  .title-all{
    // height: 50px;
    padding-top: 12px;
    display: flex;
    align-items: center;
        justify-content: flex-end;

    // 
    .title-product {
      margin-top: 2px;
      font-weight: 500;
      font-size: 12px;
      color: #666666;
    }
    .title-time {
      font-weight: 500;
      font-size: 12px;
      color: #666666;
    }
    .title-time-fff {
      font-size: 16px;
      color: #fff;
    }
  }
  .yh-show-box {
    margin-top: 9px;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    padding-bottom: 5px;
    border-bottom: 1px solid #383840;
    .yh-showname {
      margin-right: 5px;
      font-weight: 500;
      font-size: 12px;
      color: #999999;
    }
    img {
      width: 9px;
      height: 5px;
    }
  }
}

.jt-border-radious {
  border-radius:8px !important;
  border: none !important;
}
.jt-pd20 {
  padding-top: 20px;
}
.no-mtpd {
  margin-top: 20px !important;
}
.oppenClass {
  display: block;
}
.diaplayClass {
  display: none;
}
.borderNone {
  border-bottom:  none !important;
}
.paddingNone {
  padding-bottom: 21px !important;
}
.notpaddingNone {
  padding-bottom: 8px !important;
}
.jt-footer-header-pd {
  padding-bottom: 15px !important;
}

.jt-bt-border {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.jt-container {
  padding: 0 12px 12px 12px;
    .jt-header-box {
        // height: 235px;
        background: #ffeecc; 
        border-radius: 8px;
        .jt-top-bgf {
        padding: 10px 12px 10px 12px;
        background: #ffe6b2;
        border-radius:  8px 8px 0px 0px;
          .rooName-flex {
          display: flex;
          align-items: center;
          .rooname {
            font-weight: bold;
            font-size: 18px;
            color: #212121;
          }
          .pesron {
            font-weight: 500;
            font-size: 13px;
            color: #805500;
          }
        }
        .jt-kt-date {
          font-weight: 500;
          font-size: 13px;
          color: #805500;
          margin: 7px 0;
        }
        .jt-kt-marsk {
          font-weight: 500;
          font-size: 13px;
          color: #805500;
        }
        }
        .jt-cet-box {
          padding: 0 12px 0px 12px;
            .jt-tdh {
              margin-top: 4px;
              font-weight: 500;
              font-size: 12px;
              color: #805500;
            }
            .jt-price {
              margin-top: 4px;
              font-weight: bold;
              font-size: 14px;
              color: #212121;
            }
            .jt-line {
              padding-bottom: 10px;
              border-bottom: 1px solid #E6C78A;
               
            }
        }
        .jt-bot-box {
          padding: 10px 11px;
          display: flex;
          justify-content: space-between;
            .jy-item {
               width: 70px;
               display: flex;
               flex-direction: column;
               align-items: center;
               justify-content: space-between;
               .top-dw {
                font-weight: 500;
                font-size: 13px;
                color: #212121;
                margin-bottom: 3px;
               }
               .bot-text {
                font-weight: 500;
                font-size: 12px;
                color: #805500;
               }
            }
        }
     }
     .jt-score {
      margin-top: 10px;
      padding: 0 12px;
      width: 351px;
      height: 50px;
      background: #28282E;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .score-label {
        font-weight: 500;
        font-size: 14px;
        color: #999999;
      }
      .score-text {
        font-weight: 500;
        font-size: 14px;
        color: #FFFFFF;
      }
     }
     .jt-product-box {
      padding: 0 12px 12px 12px;
      margin-top: 10px;
      background: #28282E;
      border-radius: 8px;
          .Single-product {
            .jt-top-1 {
              height: 48px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              .product-name {
              font-weight: bold;
              font-size: 16px;
              color: #FFFFFF;
               .product-num {
               color:#999999;
               font-size: 14px;
               padding-left: 4px;
               }
               }
               .jt-price {
                font-weight: bold;
                font-size: 14px;
                color: #FFFFFF;
               }
            }
            .jt-top-2 {
              display: flex;
              justify-content: space-between;
              align-items: center;
               .num-text {
                font-weight: 500;
                font-size: 12px;
                color: #FFFFFF;
               }
               .cp-btn {
                width: 50px;
                height: 24px;
                background: #45454D;
                border-radius: 2px;
                text-align: center;
                line-height: 24px;
                font-weight: 500;
                font-size: 14px;
                color: #FFFFFF;
               }
            }
            .jt-top-3 {
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-top: 10px;
              padding-bottom: 10px;
              border-bottom: 1px solid #383840;
               .jt-left {
                display: flex;
                flex-direction: column;
                .xdr {
                  margin-bottom: 5px;
                  font-weight: 500;
                  font-size: 12px;
                  color: #666666;
                } 
                .time {
                  font-weight: 500;
                  font-size: 12px;
                  color: #666666;
                } 

               }
            }
          }
          .setmenu-product {
            .jt-top-1 {
              height: 48px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              .product-name {
              font-weight: bold;
              font-size: 16px;
              color: #FFFFFF;
               .product-num {
               color:#999999;
               font-size: 14px;
               padding-left: 4px;
               }
               .zp-text {
                margin-right: 5px;
                padding: 3px;
                background: #FFAA00;
                border-radius: 2px;
                font-weight: bold;
                font-size: 12px;
                color: #000000;
                text-align: center;
                line-height: 18px;
               } 
               }
               .jt-price {
                font-weight: bold;
                font-size: 14px;
                color: #FFFFFF;
               }
            }
            .jt-top-2 {
              display: flex;
              justify-content: space-between;
              align-items: center;
               .num-text {
                font-weight: 500;
                font-size: 12px;
                color: #FFFFFF;
               }
               .cp-btn {
                width: 50px;
                height: 24px;
                background: #45454D;
                border-radius: 2px;
                text-align: center;
                line-height: 24px;
                font-weight: 500;
                font-size: 14px;
                color: #FFFFFF;
               }
            }
            .jt-top-3 {
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding-bottom: 10px;
              border-bottom: 1px solid #383840;
               .jt-left {
                display: flex;
                flex-direction: column;
                .xdr {
                  margin-bottom: 5px;
                  font-weight: 500;
                  font-size: 12px;
                  color: #666666;
                } 
                .time {
                  font-weight: 500;
                  font-size: 12px;
                  color: #666666;
                } 

               }
            }
            .jt-tc-marsk {
              margin: 8px 0;
              font-weight: 500;
              font-size: 12px;
              color: #666666;
            }
          }
          .jt-wine-list {
            .jt-top-1 {
              height: 48px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              .product-name {
              font-weight: bold;
              font-size: 16px;
              color: #FFFFFF;
               .product-num {
               color:#999999;
               font-size: 14px;
               padding-left: 4px;
               }
               .zp-text {
                margin-right: 5px;
                padding: 3px;
                background: #FFAA00;
                border-radius: 2px;
                font-weight: bold;
                font-size: 12px;
                color: #000000;
                text-align: center;
                line-height: 18px;
               } 
               }
               .jt-price {
                font-weight: bold;
                font-size: 14px;
                color: #FFFFFF;
               }
            }
            .jt-top-2 {
              display: flex;
              justify-content: space-between;
              align-items: center;
               .num-text {
                font-weight: 500;
                font-size: 12px;
                color: #FFFFFF;
               }
               .cp-btn {
                width: 50px;
                height: 24px;
                background: #45454D;
                border-radius: 2px;
                text-align: center;
                line-height: 24px;
                font-weight: 500;
                font-size: 14px;
                color: #FFFFFF;
               }
            }
            .jt-top-3 {
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-top: 10px;
              padding-bottom: 10px;
              border-bottom: 1px solid #383840;
               .jt-left {
                display: flex;
                flex-direction: column;
                .xdr {
                  margin-bottom: 5px;
                  font-weight: 500;
                  font-size: 12px;
                  color: #666666;
                } 
                .time {
                  font-weight: 500;
                  font-size: 12px;
                  color: #666666;
                } 

               }
            }
          }
     }
     .jt-pay-continar {
      padding: 30px 12px 0 12px;
          .pay-title {
            font-weight: bold;
            font-size: 16px;
            color: #FFFFFF;
          }
     }

}
</style>
